<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" />
		<style>
			.mui-card .mui-control-content {
				padding: 10px;
			}
			
			.mui-control-content {
				height: 150px;
			}
			
			.inputPadding {
				border-color: #ACACB4;
				margin-left: 2%;
			}
			.firstpart{
				display:flex;
				flex-flow: nowrap;
				width: 100%;
			}
			.minline,.inline,.btn{
				margin-top: 1%;
			}
			
			.date1 {
				width: 25%;
			}
			
			.station {
				width: 22%;
			}
			.head{
				display:flex;
				flex-flow: nowrap;
				margin: 2%;
			}
			.inline{
				text-align: center;
			}
			
			.w {
				margin-left: 2%;
				margin-top: 2%;
			}
			
			.btn , .selectDevice{
				height: 30px;
			}
			.mes{
				float: left;
				padding: 5px;
			}
			.m-img {
				width:30%;
			}
			.mtxt {
				width:70%;
			}
			.selectDevice {
				border: 1px solid gray !important;
				width: 90%;
				font: 15px '微软雅黑';
				padding: 0px;
				padding-left: 5px;
				color: gray;
			}
		</style>
	</head>

	<body style="background: white;">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">历史数据</h1>
		</header>
		<div class="mui-content" style="background: white;">
			<div style="padding: 10px 10px;">
				<div class="mui-segmented-control" style="width: 70%;margin-left: 15%;">
					<a class="mui-control-item mui-active" href="#item3">预报点数据</a>
					<a class="mui-control-item" href="#item1">气象数据</a>
					<!--<a class="mui-control-item" href="#item2">灾害数据</a>-->
				</div>
			</div>
			<div id="item3" class="mui-control-content  mui-active">
				<div class="firstpart">
					<div class="minline"  style="padding-top: 1%;padding-left: 1%;"><span>日期：</span></div>
					<div class="date1 minline">
						<button id="chooseDate2" data-options='{"type":"date"}' class="btn mui-btn mui-btn-block selectDevice">选择日期</button>
					</div>
					<div class="minline"  style="padding-top: 1%;"><span>预报点：</span></div>
					<div class="minline station">
						<button id="forcasts" type="button" onclick="selectForcast()" class="btn mui-btn mui-btn-block selectDevice">选择站点</button>
					</div>
					<div class="btn">
						<button id="statistics2" type="button" class="mui-btn mui-btn-outlined">查询</button>
					</div>
				</div>
				<ul class="mui-table-view" id="parentNode2">
				</ul>
			</div>
			<div id="item1" class="mui-control-content">
				<div class="firstpart">
					<div class="minline"  style="padding-top: 1%;padding-left: 1%;"><span>日期：</span></div>
					<div class="date1 minline">
						<button id='chooseDate1' data-options='{"beginYear":2018,"endYear":2030}' class="btn mui-btn mui-btn-block selectDevice">选择时间 </button>
					</div>
					<div class="minline"  style="padding-top: 1%;"><span>气象站：</span></div>
					<div class="minline station">
						<button id="stations" type="button" onclick="selectStation()" class="btn mui-btn mui-btn-block selectDevice">选择站点</button>
					</div>
					<div class="btn">
						<button id="statistics1" type="button" class="mui-btn mui-btn-outlined">查询</button>
					</div>
				</div>
				<ul class="mui-table-view" id="parentNode1">
				</ul>
			</div>
			<!--<div id="item2" class="mui-control-content">
				<div class="head">
					<div class="w inline"><span>预报日期：</span></div>
					<div class="date inline"><input class="inputPadding"  placeholder="mm/dd/yyyy"/></div>
					<div class="btn">
						<button id="statistics" type="button" class="mui-btn mui-btn-outlined">查询</button>
					</div>
				</div>
				<div class="mui-card" >
					<ul class="mui-table-view">
						<li class="mui-table-view-cell" >
							<div class="mes m-img">
								<img src="../../images/bule.png" id="mWeaType" style="width: 100%;height: 100%;"/>
							</div>
							<div class="mes mtxt">
								<div><h4>低温蓝色预警</h5></div>
								<div>低温蓝色低温蓝色低温蓝色低温蓝色低温蓝色</div>
							</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="mes m-img">
								<img src="../../images/red.png" id="mWeaType" style="width: 100%;height: 100%;"/>
							</div>
							<div class="mes mtxt">
								<div><h4>大风红色预警</h5></div>
								<div>大风红色大风红色大风红色大风红色大风红色</div>
							</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="mes m-img">
								<img src="../../images/orange.png" id="mWeaType" style="width: 100%;height: 100%;"/>
							</div>
							<div class="mes mtxt">
								<div><h4>大雾橙色预警</h5></div>
								<div>大雾橙色大雾橙色大雾橙色大雾橙色大雾橙色</div>
							</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="mes m-img">
								<img src="../../images/yellow.png" id="mWeaType" style="width: 100%;height: 100%;"/>
							</div>
							<div class="mes mtxt">
								<div><h4>大雪黄色预警</h5></div>
								<div>大雪黄色大雪黄色大雪黄色大雪黄色大雪黄色</div>
							</div>
						</li>
					</ul>
				</div>
			</div>-->
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/jquery-3.2.1.js" ></script>
		<script src="../../js/mui.picker.min.js" ></script>
		<script src="../../js/global.js"></script>
		<script>
			(function($) {
				$('#scroll').scroll({
					indicators: true //是否显示滚动条
				});
			})(mui);
			
			//气象站日期选择器
			var timeMap1 = {
				chooseDate1: null,
			}
		
			var timebtn1 = mui("#chooseDate1");
			timebtn1.each(function(i, timebtn1) {
				timebtn1.addEventListener('tap', function() {
					var _self = this;
					var id = _self.getAttribute('id');
					if(_self.picker) {
						_self.picker.show(function(rs) {
							timeMap1[id] = rs.text;
							_self.innerText = rs.text;
						});
					} else {
						var optionsJson = _self.getAttribute('data-options') || '{}';
						_self.picker = new mui.DtPicker(JSON.parse(optionsJson));
						_self.picker.show(function(rs) {
							timeMap1[id] = rs.text;
							_self.innerText = rs.text;
						});
					}
				});
			});
			
			//气象站选择	
			var stationStartId;
			
			function selectStation() {
				stationPicker.show(function(SelectedItem) {
					stationStartId = SelectedItem[0].value;
					var stationName = SelectedItem[0].text;
					document.getElementById("stations").innerHTML = stationName;
				});
			}
			
			var stationPicker;
			var stationData = [];
			mui.plusReady(function() {
				stationPicker = new mui.PopPicker();
				$.ajax({
					url: stationDatas,
					data: {
					},
					dataType: 'json',
					type: 'get',
					timeout: 10000,
					success: function(data) {
						for(var i = 0; i < data.obj.data.length; i++) {
							var stationType = data.obj.data[i].stationStatus;
							if(stationType == 1) {
								var stationCode = data.obj.data[i].stationCode;
								var stationName = data.obj.data[i].stationAddress;
								stationData.push({
									value: stationCode,
									text: stationName
								})
							}
						}
						stationPicker.setData(stationData);
					},
					error: function(e,etype) {
						toast("服务器正在维护");
					}
				});
			});
			
			/**
			 * 气象统计按钮事件
			 */
			var dayDatas = [];
			var lengthDatas = [];
			mui("#statistics1")[0].addEventListener('tap', function() {
//				plus.nativeUI.showWaiting("获取初始化数据...");
				//获取开始日期，结束日期
				var worktimeBegin = timeMap1.chooseDate1;
				var temp;
				//判断日期
				if(worktimeBegin == null) {
					toast("时间不能为空");
					return;
				}
				if(stationStartId == null) {
					toast("站点不能为空");
					return;
				}
//				plus.nativeUI.showWaiting("正在查询...");
				$.ajax({
					url: getStationHistory,
//					url:"http://192.168.1.110:8080/GuiYang_weather_BS/weatherData.do?getStationHistory&station_code=18827363427&data_time=2018-12-04 22:00:00.000",
					dataType: 'json',
					cache: false,
					async: false,
					data: {
						station_code: stationStartId,
						data_time: worktimeBegin
					},
					success: function(data) {
						console.log("code:"+stationStartId);
						var stationlist = document.getElementById("parentNode1");
						stationlist.innerHTML = "";
						var lilist = "";
							for(var i = 0; i < data.obj.data.length; i++) {
								var liDom = '<li class="mui-table-view-cell" data-stationid="' + i + '">' + data.obj.data[i].data_time + '</li>';
								lilist += liDom;
							}
							stationlist.innerHTML = lilist;
//							plus.nativeUI.closeWaiting();
							$("li").click(function(){
	//							console.log($(this).attr("data-stationid"));
								mui.openWindow({
									url:'detailForStation.html',
									id:'detailForStation.html',
									extras:{
										datas:data.obj.data[$(this).attr("data-stationid")]
									},
									show:{
										anishow:'pop-in'
									},
									styles:{
										popGesture:'hide'
									},
									waiting:{
										autoshow:true,
										
									}
								});
							});
					},
					error:function(e,etype){
						toast("服务器在维护中  code:getDistance")
					}
				});
			});
			
			
			//预报点日期选择器
			var timeMap2 = {
				chooseDate2: null,
			}
		
			var timebtn2 = mui("#chooseDate2");
			timebtn2.each(function(i, timebtn2) {
				timebtn2.addEventListener('tap', function() {
					var _self = this;
					var id = _self.getAttribute('id');
					if(_self.picker) {
						_self.picker.show(function(rs) {
							timeMap2[id] = rs.text;
							_self.innerText = rs.text;
						});
					} else {
						var optionsJson = _self.getAttribute('data-options') || '{}';
						_self.picker = new mui.DtPicker(JSON.parse(optionsJson));
						_self.picker.show(function(rs) {
							timeMap2[id] = rs.text;
							_self.innerText = rs.text;
						});
					}
				});
			});
			
			//预报点选择	
			var forcastStartId;
			var forcastName;
			function selectForcast() {
				forcastPicker.show(function(SelectedItem) {
					forcastStartId = SelectedItem[0].value;
					forcastName = SelectedItem[0].text;
					document.getElementById("forcasts").innerHTML = forcastName;
				});
			}
			
			var forcastPicker;
			var forcastData = [];
			var forcastName;
			mui.plusReady(function() {
				forcastPicker = new mui.PopPicker();
				$.ajax({
					url: FORCAST_LIST,
					data: {
					},
					dataType: 'json',
					type: 'get',
					timeout: 10000,
					success: function(data) {
						for(var i = 0; i < data.obj.data.length; i++) {
							var forcastType = data.obj.data[i].status;
							if(forcastType == 1) {
								var forcastId = data.obj.data[i].id;
								forcastNum = data.obj.data[i].num;
								forcastData.push({
									value: forcastId,
									text: forcastNum
								})
							}
						}
						forcastPicker.setData(forcastData);
					},
					error: function(e,etype) {
						toast("服务器正在维护");
					}
				});
			});
				
			
			/**
			 * 预报统计按钮事件
			 */
			var dayDatas = [];
			var lengthDatas = [];
			mui("#statistics2")[0].addEventListener('tap', function() {
				//获取开始日期，结束日期
				var worktimeBegin = timeMap2.chooseDate2;
				var temp;
				//判断日期
				if(worktimeBegin == null) {
					toast("时间不能为空");
					return;
				}
				if(forcastStartId == null) {
					toast("站点不能为空");
					return;
				}
				$.ajax({
					// weatherData.do?getHistoryData&date=2018-11-28&forcast_id=2c90a3e5673665ef01674e007b82042a",
					url: getForcastHistory,
					dataType: 'json',
					cache: false,
					async: false,
					data: {
						date: worktimeBegin,
						forcast_id: forcastStartId
					},
					success: function(data) {
						var forcastList = document.getElementById("parentNode2");
						forcastList.innerHTML = "";
						var lilist = "";
							console.log(data.obj.data.length);
							for(var i = 0; i < data.obj.data.length; i++) {
								var liDom = '<li class="mui-table-view-cell" data-forcastid="' + i + '">' + data.obj.data[i].time + '</li>';
								lilist += liDom;
							}
							forcastList.innerHTML = lilist;
							$("li").click(function(){
								mui.openWindow({
									url:'detailForForcast.html',
									id:'detailForForcast.html',
									extras:{
										datas:data.obj.data[$(this).attr("data-forcastid")],
										forcastName:forcastName
									},
									show:{
										anishow:'pop-in'
									},
									styles:{
										popGesture:'hide'
									},
									waiting:{
										autoshow:true
									}
								});
							});
					},
					error:function(e,etype){
						toast("服务器在维护中  code:getDistance")
					}
				});
			});
			
			
			/**
			 * toast方法
			 * @param {Object} msg
			 */
			function toast(msg){
				mui.toast(msg,{ duration:'short', type:'div' }) 
			}
			
			
	//			var detail=document.getElementById("weather_detail");
	//			detail.addEventListener('tap',function(event){
	//				mui.openWindow({
	//					url:'detail.html',
	//					id:'detail.html',
	//					show:{
	//						anishow:'pop-in'
	//					},
	//					styles:{
	//						popGesture:'hide'
	//					},
	//					waiting:{
	//						autoshow:true
	//					}
	//				});
	//			});
			
		</script>
	</body>
</html>